<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <div>
          <img src="../assets/logo.png"/>
          <span>小果课堂 </span>
        </div>

        <el-button type="primary" @click="loginOut"
                   style="width:60px;height:30px;margin-top:15px;line-height:30px;padding:0 0">退出
        </el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '60px':'200px'">
          <div style="color: #fff; background:rgb(74,80,100);cursor:pointer" @click="isCollapse=!isCollapse">|||</div>
          <!-- 导航菜单 -->
          <el-menu
              default-active="activePath"
              class="el-menu-vertical-demo"
              background-color="#333744"
              text-color="#fff"
              :unique-opened="true"
              active-text-color="#ffd04b"
              :collapse="isCollapse"
              :collapse-transition="false"
              :router="true"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
              </template>
              <el-menu-item index="/index">首页</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/user">用户列表</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>课程管理</span>
              </template>
              <el-menu-item index="/course/video">课程详情</el-menu-item>
              <el-menu-item index="/course/info">发布课程</el-menu-item>
              <el-menu-item index="/course/video_banner">轮播图管理</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/order">订单详情</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {

      //是否水平折叠菜单
      isCollapse: false,
      //当前激活的路径
      activePath: ''

    }
  },
  methods: {
    //退出登录
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push({path: '/login'})
    },
    //点击导航，有激活的状态
    activeSave(path) {
      this.activePath = path;
      window.sessionStorage.setItem('activePath', path);
    }
  },
  created() {
    //导航激活的状态
    this.activePath = window.sessionStorage.getItem('activePath');
  }

}
</script>

<style scoped="scoped">
.home-container {
  height: 100%;
  background: #c4c4c4;
}

.el-container {
  height: 100%;
}

.el-header {
  background: #333744;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 20px;

}

.el-header img {
  vertical-align: middle;
  width: 60px;
  height: 65px;
}

.el-aside {
  background: #333744;
  height: 100%;
  box-sizing: border-box;
}

.el-main {
  background: #ececec;
}

.el-menu {
  border-right-width: 0;
}
</style>
